<!---
  @author: andy
  @description: logo组件
-->
<template>
  <div class="layout-logo" :style="{...heightStyle , ...logoStyle}">
    <div v-if="logo.enable" class="logo-box">
      <img :src="logo.url" class="logo" alt="应用图标">
    </div>
    <span v-if="!collapsed" class="logo-text">{{app.name}}</span>
  </div>
</template>
<script lang='ts' setup>
import { useConfigStore } from '@/stores/configs/config';
import { storeToRefs } from 'pinia';
import { computed, type CSSProperties } from 'vue';
type Props = {
  collapsed?: boolean;
}
const props = defineProps<Props>();
const configStore = useConfigStore();
const { config } = storeToRefs(configStore);
const { logo , app , header } = config.value;
const logoStyle = computed(() => {
  return props.collapsed ? {
    justifyContent : 'center'
  } : {} as CSSProperties
});
const heightStyle = computed(() => {
  return configStore.showSidebar ? {
    height : header.height + 'px'
  } : {} as CSSProperties
})
</script>
<style lang='less' scoped>
.layout-logo {
  // width: 100%;
  display: flex;
  gap: 0.12rem;
  align-items: center;
  padding: 0 0.16rem;
  .logo-box {
    width: 0.32rem;
    height: 0.32rem;
    .logo {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .logo-text {
    font-weight: 500;
    font-size: var(--font-size-larger);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    .useTheme({
      color: text-color;
    });
  }
}
</style>